<template>
  <div class="container">
    <div class="input_modal">
      <div class="input-item">
        <span>昵称：</span>
        <el-input
                v-model="nicknameLike"
                placeholder="请输入"
                class="proName"
                style="width:100px"
        />
      </div>
      <div class="input-item">
        <span>手机号：</span>
        <el-input
          v-model="phoneLike"
          placeholder="请输入"
          class="proName"
          style="width:100px"
        />
      </div>
      <el-button
        type="primary"
        size="medium"
        @click="getList()"
      >查询</el-button>
    </div>
    <div class="table_con">
      <el-table
        v-loading="loading"
        :data="tableData"
        :border='true'
      >
        <el-table-column
                type="index"
                width="50"
                label="序号"
        >
        </el-table-column>
        <el-table-column
          prop="avatorLink"
          :formatter="formatter"
          label="头像"
        >
          <template slot-scope="scope">
            <img :src="scope.row.headPortrait" alt="" style="width: 100px;">
          </template>
        </el-table-column>
        <el-table-column
          prop="nickname"
          label="昵称"
        ></el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.sex == 0">未知</div>
            <div v-else-if="scope.row.sex == 1">男</div>
            <div v-else-if="scope.row.sex == 2">女</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
        ></el-table-column>
        <el-table-column
          prop=""
          label="操作"
          width='240'
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              class="el-icon-delete"
              @click="handleDel(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageIndex"
        :page-size="pageSize"
        :page-sizes='[10,20,30,40]'
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageCount"
      >
      </el-pagination>
    </div>

  </div>
</template>

<script>
  let CONSTANT = require("../../constant/constant.js");
  let common = require("../../common.js");
  export default {
    data() {
      return {
        tableData: [],
          nicknameLike: '',
          phoneLike: '',
        pageCount: null,
        pageIndex: 1,
        pageSize: 10,
        loading: true,
        mobileLike: '',
        type: ''
      };
    },
    mounted() {
      this.getList();
    },
    methods: {
      formatter(row, column, cellValue) {
        return cellValue ? cellValue : "- -";
      },
      formatter1(row, column, cellValue) {
        return cellValue ? cellValue : 0;
      },
      getList: function() {
        let url = CONSTANT.URL.userList;
        let data = {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
            phoneLike: this.phoneLike,
            nicknameLike: this.nicknameLike,
        };
        this.loading = true;
        common.post(url, data, res => {
          this.loading = false;
          this.tableData = res.data.bussData;
          this.pageCount = res.data.count;
        });
      },
      handleClickTab(tab, e) {},
      search: function(e) {
        if (e.keyCode == 13) {
          this.pageIndex = 1;
          this.getList();
        }
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.pageIndex = val;
        this.getList();
      },
      linkTo() {
        this.$router.push("goodEdit");
      },
      handleDel(id) {
          this.$confirm('确定删除?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
              let  url = CONSTANT.URL.userDel;
              common.post1(url, {id},(res)=>{
                  if(res.code == 200){
                      this.$message({
                          type:'success',
                          message:'删除成功!'
                      });
                      this.getList();
                  }
                  else{
                      this.$message({
                          type:'warning',
                          message:res.errMsg
                      })
                  }
              })
          }).catch(() => {
              this.$message({
                  type: 'info',
                  message: '已取消删除'
              });
          });
      }
    },
    filters: {
      formatStatus(value) {
        var list = [];
        list["y"] = "上架";
        list["n"] = "下架";
        if (value) {
          return list[value];
        } else {
          return "--";
        }
      }
    }
  };
</script>
